//
// Mixins
//

@use "sass:math";

@mixin popover-pointer($width, $height, $offset: 50%, $position: null) {
	$border-x: math.div($width, 2);
	$border-y: $height;

	&::before,
	&::after {
		content: "";
		position: absolute;
		left: $offset;
		border: solid transparent;
		border-width: $border-y $border-x;
		transform: translateX(-$border-x);
	}

	#{if($position == "bottom", "&", "&[class*='bottom']")} {
		&::before,
		&::after {
			border-top-width: 0;
		}

		&::before {
			top: (-$border-y - 1px);
			border-bottom-color: var(--color-panedivider);
		}

		&::after {
			top: -$border-y;
			border-bottom-color: var(--color-background);
		}
	}

	#{if($position == "top", "&", "&[class*='top']")} {
		&::before,
		&::after {
			border-bottom-width: 0;
		}

		&::before {
			bottom: (-$border-y - 1px);
			border-top-color: var(--color-panedivider);
		}

		&::after {
			bottom: -$border-y;
			border-top-color: var(--color-background);
		}
	}

	#{if($position == "top", "&", "&[class*='left']")} {
		&::before,
		&::after {
			left: 20px;
		}
	}

	#{if($position == "top", "&", "&[class*='right']")} {
		&::before,
		&::after {
			left: unset;
			right: 20px;
			transform: translateX($border-x);
		}
	}
}

// An implementation of Firefox light-dark() CSS mixin, which is not supported in 102
@mixin light-dark($prop, $light-color, $dark-color) {
	@media (prefers-color-scheme: light) {
		#{$prop}: $light-color;
	}
	@media (prefers-color-scheme: dark) {
		#{$prop}: $dark-color;
	}
}

@mixin macOS-inactive-opacity {
	$selector: &;
	@at-root {
		@media (-moz-platform: macos) {
			#{$selector} {
				&:-moz-window-inactive {
					opacity: 0.6;
				}
			}
		}
	}
}

@mixin pdf-page-image-dark-light {
	$selector: &;
	@at-root {
		@media (prefers-color-scheme: dark) {
			body.use-dark-mode-for-content {
				#{$selector} {
					filter: invert(90%) saturate(100%) hue-rotate(180deg) brightness(100%) contrast(125%)
				}
			}
		}
	}
}
